<template>
  <div
    class="min-h-screen bg-gradient-to-br flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full bg-white rounded-xl shadow-lg p-8">
      <!-- 标题部分 -->
      <div class="text-center mb-8">
        <div class="flex justify-center mb-4">
          <div
            class="w-14 h-14 rounded-full bg-gradient-to-br  flex items-center justify-center shadow-md">
            <img src="/web.png" alt="Logo"
                 class="h-14 w-14 object-cover rounded-full">
          </div>
        </div>
        <h2 class="text-2xl font-bold text-gray-900">欢迎回来</h2>
        <p class="mt-2 text-sm text-gray-600">登录您的账号以继续</p>
      </div>

      <!-- 登录表单 -->
      <form class="space-y-6" @submit.prevent="handleLogin">
        <!-- 用户名/邮箱输入框 -->
        <div>
          <label for="phone" class="block text-sm font-medium text-gray-700">手机号</label>
          <div class="mt-1 relative">
            <input
              id="phone"
              v-model="form.phone"
              type="text"
              required
              class="appearance-none block w-full px-3 py-2.5 border rounded-lg  focus:outline-none focus:ring-2 focus:ring-[#79c2a5] focus:border-transparent"
              :class="{'border-red-300': errors.phone}"
            >
            <div v-if="errors.phone" class="absolute right-0 pr-3 flex items-center pointer-events-none h-full">
              <i class="fas fa-exclamation-circle text-red-500"></i>
            </div>
          </div>
          <p v-if="errors.phone" class="mt-1 text-xs text-red-500">{{ errors.phone }}</p>
        </div>

        <!-- 密码输入框 -->
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
          <div class="mt-1 relative">
            <input
              id="password"
              v-model="form.password"
              :type="showPassword ? 'text' : 'password'"
              required
              class="appearance-none block w-full px-3 py-2.5 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#79c2a5] focus:border-transparent"
              :class="{'border-red-300': errors.password}"
            >
            <button
              type="button"
              @click="togglePassword"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
              style="transform: none;"
            >
            </button>
          </div>
          <p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
        </div>

        <!-- 记住我和忘记密码 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input
              id="remember-me"
              v-model="form.rememberMe"
              type="checkbox"
              class="h-4 w-4 text-[#5cd3a3] focus:ring-[#79c2a5] border-gray-300 rounded cursor-pointer"
            >
            <label for="remember-me" class="ml-2 block text-sm text-gray-700 cursor-pointer">记住我</label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-[#5cd3a3] hover:text-[#79c2a5]">忘记密码？</a>
          </div>
        </div>

        <!-- 登录按钮 -->
        <div>
          <button
            type="submit"
            :disabled="loading"
            class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-[#5cd3a3] to-[#79c2a5] hover:from-[#79c2a5] hover:to-[#5cd3a3] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#79c2a5] transition-all duration-200"
          >
            <span v-if="!loading">登录</span>
            <i v-else class="fas fa-circle-notch fa-spin"></i>
          </button>
        </div>
      </form>

      <!-- 注册链接 -->
      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600">
          还没有账号？
          <router-link to="/register" class="font-medium text-[#5cd3a3] hover:text-[#79c2a5]">立即注册</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";

export default {
  name: "Login",
  data() {
    return {
      form: {
        phone: "",
        password: "",
        rememberMe: false
      },
      errors: {
        phone: "",
        password: ""
      },
      loading: false,
      showPassword: false
    };
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword;
    },
    validateForm() {
      let isValid = true;
      this.errors = {
        phone: "",
        password: ""
      };

      if (!this.form.phone) {
        this.errors.phone = "请输入用户名或邮箱";
        isValid = false;
      }

      if (!this.form.password) {
        this.errors.password = "请输入密码";
        isValid = false;
      } else if (this.form.password.length < 6) {
        this.errors.password = "密码长度不能少于6位";
        isValid = false;
      }

      return isValid;
    },
    async handleLogin() {
      if (!this.validateForm()) return;

      this.loading = true;
      try {
        const response = await login(this.form);

        // 检查响应数据
        if (response.code === 200 && response.data) {
          // 使用 Vuex 的 login action 存储用户信息
          await this.$store.dispatch("login", {
            token: response.data.token,
            userInfo: {
              name: response.data.nickName,
              avatar: response.data.avatar
            }
          });

          this.$toast.success("登录成功");

          // 如果设置了记住我，可以在本地存储中设置标记
          if (this.form.rememberMe) {
            localStorage.setItem("rememberMe", "true");
          }

          // 跳转到首页
          await this.$router.push("/");
        }
      } catch (error) {
        console.error("登录错误:", error);
        this.$toast.error(error.message || "登录失败，请重试");
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
/* 添加输入框聚焦时的过渡效果 */
input {
  transition: all 0.2s ease-in-out;
}

/* 添加按钮悬停时的阴影效果 */
button:not(:disabled):hover {
  transform: translateY(-1px);
}

/* 添加加载动画 */
.fa-spin {
  animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>